<template>
  <tabbar v-show="isShowBar">
    <tabbar-item @on-item-click="gotoNav(1)" :selected="isHome">
      <img slot="icon" src="@/assets/images/icon_home_active.png" class="icon-img-active">
      <img slot="icon" src="@/assets/images/icon_home.png" class="icon-img">
      <span slot="label">首页</span>
    </tabbar-item>
    <tabbar-item @on-item-click="gotoNav(2)" :selected="isJoin">
      <img slot="icon" src="@/assets/images/icon_qq.png" class="icon-img-active">
      <img slot="icon" src="@/assets/images/icon_qq.png" class="icon-img">
      <span slot="label">加入我们</span>
    </tabbar-item>
    <tabbar-item @on-item-click="gotoNav(3)" :selected="isMine">
      <img slot="icon" src="@/assets/images/icon_mine_active.png" class="icon-img-active">
      <img slot="icon" src="@/assets/images/icon_mine.png" class="icon-img">
      <span slot="label">我的</span>
    </tabbar-item>
  </tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
// import { mapState } from 'vuex'
export default {
  name: 'vtabbar',
  components: {
    Tabbar,
    TabbarItem
  },
  methods: {
    // 底部导航跳转
    gotoNav (type) {
      if (type === 1) {
        this.$router.push({name: 'home'})
      } else if (type === 2) {
        this.$router.push({name: 'joinUs'})
      } else if (type === 3) {
        this.$router.push({name: 'mineIndex'})
      }
    }
  },
  computed: {
    isHome () {
      return this.$route.path === '/'
    },
    isJoin () {
      return /joinus/.test(this.$route.path)
    },
    isMine () {
      return /mine/.test(this.$route.path)
    },
    isShowBar () {
      if (this.$route.meta.hasTabbar) {
        return true
      }
      return false
    }
  }
}
</script>
